import React from 'react';
import { Layout } from 'antd';
import Router from '../component/public/router';
import { LocaleProvider } from '../component/pc/antd';
import MenuNav from '../component/pc/antd/menu_nav';
import { page, nav } from './config';
import style from './style.module.less';

const { Header, Content, Sider } = Layout;

/**
 * 布局层
 */
export default class Page extends React.Component<{}, { key: number }> {
  state = { key: 0 };

  reload = () => this.setState({ key: this.state.key + 1 });

  render() {
    return (
      <LocaleProvider>
        <Layout className="fill">
          <Sider>
            <div className={style.logo} />
            <MenuNav data={nav} reload={this.reload} menuProps={{ theme: 'dark' }} />
          </Sider>
          <Layout>
            <Header className={style.header}>一定程度的限制，是为了更广阔的拓展</Header>
            <Content className={style.content} key={this.state.key}>
              <Router page={page} transition={true} />
            </Content>
          </Layout>
        </Layout>
      </LocaleProvider>
    );
  }
}
